<template>
	<view class="JSwiper">
		<swiper 
			class="swiper-container" 
			:indicator-dots="true" 
			:autoplay="true" 
			:interval="3000" 
			:duration="500"
			:circular="true"
			indicator-color="rgba(255, 255, 255, 0.5)"
			indicator-active-color="#ffffff"
		>
			<swiper-item v-for="(item, index) in list" :key="item.id || index" class="swiper-item">
				<view class="swiper-content" @click="handleItemClick(item)">
					<image 
						class="swiper-image" 
						:src="item.image" 
						mode="aspectFill"
						:lazy-load="true"
					></image>
					<view class="swiper-overlay" v-if="item.title">
						<text class="swiper-title">{{ item.title }}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	name: 'JSwiper',
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	data() {
		return {};
	},
	methods: {
		/**
		 * 处理轮播图点击事件
		 * @param {Object} item 轮播图项目
		 */
		handleItemClick(item) {
			console.log('轮播图点击:', item);
			
			// 触发父组件事件
			this.$emit('swiperClick', item);
			
			// 如果有链接，进行页面跳转
			if (item.link) {
				uni.navigateTo({
					url: item.link,
					fail: (err) => {
						console.log('页面跳转失败:', err);
						// 如果跳转失败，可以显示提示
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
};
</script>

<style lang="less">
.JSwiper {
	padding: @page-col-spacing @page-row-spacing;
	
	.swiper-container {
		width: 100%;
		height: 300rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}
	
	.swiper-item {
		width: 100%;
		height: 100%;
	}
	
	.swiper-content {
		position: relative;
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
		overflow: hidden;
	}
	
	.swiper-image {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
	}
	
	.swiper-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
		padding: 40rpx 20rpx 20rpx;
		display: flex;
		align-items: flex-end;
	}
	
	.swiper-title {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 600;
		line-height: 1.2;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
	}
}
</style>
